<template>
  <div class="app-margins">
    <el-row :gutter="10" class="mb8">
      <el-col :span="3.5">
        <div class="sp-commodity">Shipments</div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-cascader :options="platFormOptions" :show-all-levels="false" @change="handleNodeClick"
            style="margin-top: 8px"></el-cascader>
        </div>
      </el-col>
      <el-col :span="1" style="display: flex; justify-content: flex-end;float:right">
        <el-button type="primary" plain style="margin-top: 8px" @click="addSend"
          v-hasPermi="['shipments:send:add']">Send localInventory</el-button>
      </el-col>
    </el-row>

    <div class="Card-module_card__zeE7r Card-module_medium__quHDO flex flex-row">
      <div class="flex-1 flex flex-col pr-16 pr-16">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">Action required</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="需要完成的发货。设置货件以填写详细信息或添加跟踪号码。" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="current-sales">
              <font style="font-weight: bold">{{ this.actionRequired }}</font>
            </p>
          </div>
        </div>
        <span class="vertical-line1"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">In transit</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="货物正在运往沃尔玛工厂的途中。" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="sales-capability">
              <font style="font-weight: bold">{{ this.inTransit }}</font>
            </p>
          </div>
        </div>
        <span class="vertical-line2"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">Receiving</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="我们正在配送中心检查和存储的商品。正确准备的物品将在交货后 2 个工作日内收到。" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="potential-sales">
              <font style="font-weight: bold">{{ this.receiving }}</font>
            </p>
          </div>
        </div>
        <span class="vertical-line3"></span>
      </div>
      <div class="flex-1 flex flex-col pr-16 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">Closed</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="由于没有任何活动，我们已完成接收或关闭货件。" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="avg-gmv">
              <font style="font-weight: bold">{{ this.closed }}</font>
            </p>
          </div>
        </div>
        <span class="vertical-line4"></span>
      </div>
      <div class="flex-1 flex flex-col pr-20 px-16 border-l border-gray-20">
        <div class="flex items-center gap-4">
          <p class="Body-module_body__eiCkB Body-module_body1__B5yP7 Body-module_weight400__4Oy12 text-12">
            <font style="vertical-align: inherit">
              <font style="vertical-align: inherit">Canceled</font>
            </font>
          </p>
          <span class="StatefullPopover-module_popoverContainer__jjevh">
            <el-tooltip content="您取消的入库订单。" effect="dark" placement="top">
              <svg-icon icon-class="question"></svg-icon>
            </el-tooltip>
          </span>
        </div>
        <div>
          <div class="flex items-center">
            <p class="Body-module_body__eiCkB Body-module_body3__KFtX3 Body-module_weight700__crYTs text-24 leading-9"
              variant="3" weight="700" data-testid="avg-gmv-two-weeks">
              <font style="font-weight: bold">{{ this.canceled }}</font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <br />
    <br />
    <div class="Card-module_card__zeE7r Card-module_medium__quHDO p-0 pt-16 overflow-hidden flex flex-col gap-16">
      <div>
        <el-input placeholder="Search" v-model="input" @keyup.enter.native="shipmentsQuery">
          <el-select v-model="select" slot="prepend" placeholder="请选择" class="select-input">
            <el-option label="Shipment ID" value="1"></el-option>
            <el-option label="Inbound order ID" value="2"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="shipmentsQuery"
            v-hasPermi="['walmart:shipment:list']"></el-button>
        </el-input>
      </div>
      <div class="div-items">
        <el-table v-loading="loading" :data="shipmentList" style="width: 100%" :max-height="'600px'">
          <el-table-column type="selection" align="center" fixed />
          <el-table-column label="Inbound order ID" prop="inboundOrderId" align="center" width="190px">
            <template slot-scope="scope">
              <span>{{ scope.row.inboundOrderId.slice(0, 18)
                }}<span v-if="scope.row.inboundOrderId.length > 18">...</span></span>
            </template>
          </el-table-column>
          <el-table-column label="Shipment ID" prop="shipmentId" align="center">
            <template slot-scope="scope">
              <!-- 动态绑定样式，满足条件时为红色、下划线 -->
              <span :style="getShipmentStyle(scope.row)"
                @click="checkPermission('walmart:shipment:setStockList') && handleConditionalClick(scope.row)"
                class="shipment-id-link">
                {{ scope.row.shipmentId }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="Date created" prop="createdDate" align="center">
            <template slot-scope="scope">
              {{ parseTime(scope.row.createdDate, "{y}年{m}月{d}日") }}
            </template>
          </el-table-column>
          <el-table-column label="Ship to" prop="shipFcName" align="center" />
          <el-table-column label="Shipped units" prop="shipmentUnits" align="center" />
          <el-table-column label="Received units" prop="receivedUnits" align="center" />
          <el-table-column label="Expected delivery date" prop="expectedDeliveryDate" align="center" width="170px">
            <template slot-scope="scope">
              {{ parseTime(scope.row.expectedDeliveryDate, "{y}年{m}月{d}日") }}
            </template>
          </el-table-column>
          <el-table-column label="Actual delivery" prop="actualDeliveryDate" align="center">
            <template slot-scope="scope">
              {{ parseTime(scope.row.actualDeliveryDate, "{y}年{m}月{d}日") }}
            </template>
          </el-table-column>
          <el-table-column label="Status" prop="status" align="center">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.walmart_shipments_status" :value="scope.row.status" />
            </template>
          </el-table-column>
          <el-table-column width="50px">
            <template slot-scope="scope">
              <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)">
                <el-button size="mini" type="text" icon="el-icon-more"></el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="handleViewOrder" icon="el-icon-tickets"
                    v-hasPermi="['walmart:shipment:detail']">查看订单</el-dropdown-item>
                  <el-dropdown-item command="handleShipment" icon="el-icon-setting"
                    v-if="scope.row.status == 'PENDING_SHIPMENT_DETAILS'"
                    v-hasPermi="['walmart:shipment:set']">设置发货</el-dropdown-item>
                  <el-dropdown-item command="handleLabel" icon="el-icon-printer" v-if="
                    scope.row.status == 'RECEIVING_IN_PROGRESS' ||
                    scope.row.status == 'CREATED' ||
                    scope.row.status == 'AWAITING_DELIVERY' ||
                    scope.row.status == 'COMPLETED'
                  " v-hasPermi="['walmart:shipment:labelPrint']">打印标签</el-dropdown-item>
                  <el-dropdown-item command="handleTracking" icon="el-icon-map-location" v-if="
                    scope.row.status !== 'CANCELLED' &&
                    scope.row.status !== 'RECEIVING_IN_PROGRESS' &&
                    scope.row.status !== 'PENDING_SHIPMENT_DETAILS'
                  " v-hasPermi="['walmart:shipment:track']">追踪货运</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top: -11px; height: 55px">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageNum" :limit.sync="queryParam.pageSize"
          @pagination="getShipment()" />
      </div>
    </div>

    <!-- 选择仓库备货 -->
    <el-dialog :title="titleDepotStock" :visible.sync="dialogVisible" width="1400px" append-to-body
      :close-on-click-modal="false">
      <el-table v-loading="loading" :data="stockList" style="width: 100%; overflow-x: auto;"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" min-width="10" align="center" />
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.planList" style="width: 100%"
              v-if="scope.row.planList && scope.row.planList.length > 0">
              <el-table-column type="expand">
                <template slot-scope="subScope">
                  <el-table :data="subScope.row.shipmentsProductList" style="width: 100%"
                    v-if="subScope.row.shipmentsProductList && subScope.row.shipmentsProductList.length > 0">
                    <el-table-column label="图片" align="center" prop="imgName">
                      <template slot-scope="productScope">
                        <image-preview :src="productScope.row.imgName || '-'" :width="50" :height="50" />
                      </template>
                    </el-table-column>
                    <el-table-column label="品名" align="center" prop="name">
                      <template slot-scope="productScope">
                        {{ productScope.row.name || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="SKU" align="center" prop="sku">
                      <template slot-scope="productScope">
                        {{ productScope.row.sku || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="价格(￥)" align="center" prop="price">
                      <template slot-scope="productScope">
                        {{ productScope.row.price || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="已发数量" align="center" prop="sentSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.sentSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="未发数量" align="center" prop="operSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.operSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="计划数量" align="center" prop="planSize">
                      <template slot-scope="productScope">
                        {{ productScope.row.planSize || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="发货数量" align="center" prop="planCount">
                      <template slot-scope="productScope">
                        {{ productScope.row.planCount || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="金额(￥)" align="center" prop="amount">
                      <template slot-scope="productScope">
                        {{ productScope.row.amount || '-' }}
                      </template>
                    </el-table-column>
                    <el-table-column label="备注" align="center" prop="productRemarks">
                      <template slot-scope="productScope">
                        {{ productScope.row.productRemarks || '-' }}
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="计划编号" align="center" prop="planNumber">
                <template slot-scope="planScope">
                  {{ planScope.row.planNumber || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="计划名称" align="center" prop="planName">
                <template slot-scope="planScope">
                  {{ planScope.row.planName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="发货日期" align="center" prop="shipTime">
                <template slot-scope="planScope">
                  {{ planScope.row.shipTime || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="发往店铺" align="center" prop="shopName">
                <template slot-scope="planScope">
                  {{ planScope.row.shopName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="货运方式" align="center" prop="mannerName">
                <template slot-scope="planScope">
                  {{ planScope.row.mannerName || '-' }}
                </template>
              </el-table-column>
              <el-table-column label="制单人" align="center" prop="createBy">
                <template slot-scope="planScope">
                  {{ planScope.row.createBy || '-' }}
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column label="备货编号" align="center" prop="stockNumber" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.stockNumber || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货方式" align="center" prop="mannerName" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.mannerName || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货日期" align="center" prop="shipmentDate" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.shipmentDate || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="发货数" align="center" min-width="55">
          <template slot-scope="scope">
            {{ totalSentSizeForRow[scope.$index] }}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" min-width="55">
          <template slot-scope="scope">
            {{ scope.row.remark || '-' }}
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="stockTotal > 0" :total="stockTotal" :page.sync="depotStockParams.pageNum"
        :limit.sync="depotStockParams.pageSize" @pagination="getStockList" />
      <!-- 底部按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="openCancel">取消</el-button>
        <el-button type="primary" @click="openConfirmSelection">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPlatFormTree } from "@/api/walmart/auth";
import {
  getShipmentList,
  getShipmentCountStatus,
  downloadLabel,
} from "@/api/walmart/shipment";
import { listPlan as stockListPlan, bingShipmentStock } from "@/api/sale/stockPlan";
export default {
  name: 'Shipments',
  dicts: ["walmart_shipments_status"],
  data() {
    return {
      input: "",
      select: "1",
      // 遮罩层
      loading: false,
      // 非多个禁用
      multiple: true,
      platFormOptions: [],
      shipmentList: [],
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        inboundOrderId: null,
        shipmentId: null,
        authId: null,
        status: null,
        createdDate: '2025-04-01 19:14:38',
      },
      // 总条数
      total: 0,

      actionRequired: 0,
      inTransit: 0,
      receiving: 0,
      closed: 0,
      canceled: 0,

      dialogVisible: false,  // 控制弹窗的显示
      titleDepotStock: '',
      depotStockParams: {
        status: 0,
        pageNum: 1,
        pageSize: 10,
      },
      //仓库备货所有数据
      stockList: [],
      selectedRows: [],// 用于存储选中的行数据
      stockTotal: 0,
      shipmentStockParam: {},
    };
  },
  created() {
    this.getPlatForm();
  },
  beforeRouteEnter(to, from, next) {
    // 只在路由查询参数中存在 page 时，更新 queryParam
    if (to.query.page) {
      next(vm => {
        vm.queryParam.pageNum = Number(to.query.page);  // 确保是数字
        vm.getShipment();
      });
    } else {
      next();  // 如果没有 page 参数，继续路由跳转，不更新 queryParam
    }
  },
  computed: {
    totalSentSizeForRow() {
      const result = this.stockList.map((stockItem, index) => {
        const stockSentSize = stockItem.planList.reduce((innerSum, planItem) => {
          const shipmentsSum = planItem.shipmentsProductList.reduce((shipSum, shipment) => {
            return shipSum + (shipment.planCount || 0);
          }, 0);
          return innerSum + shipmentsSum;
        }, 0);
        return stockSentSize;
      });
      return result;
    }
  },
  methods: {
    /** 查询店铺名称列表 */
    getPlatForm() {
      getPlatFormTree().then((response) => {
        this.platFormOptions = response.data;
      });
    },
    handleNodeClick(data) {
      this.queryParam.authId = data[2];

      this.getShipment();
      this.queryParam.status = "PENDING_SHIPMENT_DETAILS";
      getShipmentCountStatus(this.queryParam).then((response) => {
        this.actionRequired = response.data;
        this.queryParam.status = "RECEIVING_IN_PROGRESS";
        getShipmentCountStatus(this.queryParam).then((response) => {
          this.receiving = response.data;
          this.queryParam.status = "CLOSED";
          getShipmentCountStatus(this.queryParam).then((response) => {
            this.closed = response.data;
            this.queryParam.status = "CANCELLED";
            getShipmentCountStatus(this.queryParam).then((response) => {
              this.canceled = response.data;
            });
          });
        });
      });
    },

    getShipment() {
      getShipmentList(this.queryParam).then((response) => {
        this.shipmentList = response.rows;
        this.total = response.total;
      });
    },
    shipmentsQuery() {
      if (this.select == "1") {
        this.queryParam.shipmentId = this.input;
        this.getShipment();
      } else if (this.select == "2") {
        this.queryParam.inboundOrderId = this.input;
        this.getShipment();
      }
    },

    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleViewOrder":
          this.handleViewOrder(row);
          break;

        case "handleShipment":
          this.handleShipment(row);
          break;

        case "handleLabel":
          this.handleLabel(row);
          break;

        case "handleTracking":
          this.handleTracking(row);
          break;
      }
    },

    /** 查看订单 */
    handleViewOrder(row) {
      localStorage.setItem("shipmentData", JSON.stringify(row));
      this.$router.push({ path: "/shipments/view" });
    },

    /**跳转发货页面 */
    addSend() {
      if (!this.queryParam.authId) {
        this.$message.error('请选择店铺');
        return;
      }
      localStorage.setItem("itemsData", JSON.stringify(this.queryParam.authId));
      this.$router.push("/shipments/send");
    },
    //设置发货
    handleShipment(row) {
      localStorage.setItem("shipmentData", JSON.stringify(row));
      this.$router.push("/shipments/details");
    },
    //货件追踪
    handleTracking(row) {
      localStorage.setItem("shipmentData", JSON.stringify(row));
      this.$router.push("/shipments/tracking");
    },
    // 下载标签
    handleLabel(row) {
      const shipmentId = row.shipmentId;
      if (shipmentId) {
        downloadLabel({ shipmentId: shipmentId }).then(response => {

          const contentType = response.headers?.['content-type'] || 'application/octet-stream';
          const blob = new Blob([response.data || response], { type: contentType });

          // 获取文件名
          const disposition = response.headers?.['content-disposition'] || '';
          const fileNameMatch = disposition.match(/filename\*=UTF-8''(.+)/);
          const fileName = fileNameMatch ? decodeURIComponent(fileNameMatch[1]) : `label_${shipmentId}.pdf`;

          // 创建下载链接
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = fileName;
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }).catch((error) => {
          this.$message.error(error.message || '下载失败');
        });
      } else {
        this.$message.error('Shipment ID not available');
      }
    },
    // 获取shipmentId的样式
    getShipmentStyle(row) {
      const targetDate = new Date(this.queryParam.createdDate).getTime();
      const createdDate = new Date(row.createdDate).getTime();
      // 如果hasStockBinding为0且createdDate >= 2025-04-01 19:14:38，则设置红色和下划线
      if (row.hasStockBinding === '0' && createdDate >= targetDate && row.status != 'CANCELLED') {
        return { color: 'red', textDecoration: 'underline', cursor: 'pointer' };
      }
      return {};
    },
    canClick(row) {
      const targetDate = new Date(this.queryParam.createdDate).getTime();
      const createdDate = new Date(row.createdDate).getTime();
      return row.hasStockBinding === '0' && createdDate >= targetDate && row.status != 'CANCELLED';
    },

    handleConditionalClick(row) {
      if (this.canClick(row)) {
        this.handleClick(row);
      }
    },
    // 处理点击事件
    handleClick(row) {
      this.shipmentStockParam.shipmentId = row.shipmentId;  // 记录点击的shipmentId
      this.dialogVisible = true;  // 显示弹窗
      this.titleDepotStock = "选择备货计划";
      this.getStockList();
    },
    //备货计划列表
    getStockList() {
      this.depotStockParams.shipmentId = 111;//查询不为空的数据
      this.depotStockParams.authId = this.queryParam.authId;
      stockListPlan(this.depotStockParams).then((response) => {
        this.stockList = response.rows;
        this.stockTotal = response.total;
      });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
    },
    //选择备货取消按钮
    openCancel() {
      this.dialogVisible = false;
    },
    //选择备货确定按钮
    openConfirmSelection() {
      if (!this.selectedRows.length) {
        this.$message.error("请选择备货计划");
        return;
      }
      if (this.selectedRows.length > 1) {
        this.$message.error("请选择单个备货计划");
        return;
      }

      const missingFreight = this.selectedRows[0].planList
        .flatMap(plan => plan.shipmentsProductList)
        .some(product => !product.freight || Number(product.freight) === 0);
      if (missingFreight) {
        //this.$message.error("存在未导入运费的商品，请先补充运费");
        //return;
      }

      this.shipmentStockParam.stockId = this.selectedRows[0].stockId;
      this.shipmentStockParam.authId = this.queryParam.authId;
      bingShipmentStock(this.shipmentStockParam).then((res) => {
        this.$message.success("绑定备货计划成功！");
        this.dialogVisible = false;
        this.getShipment();
        this.shipmentStockParam = {};
      }).catch((err) => {
        this.$message.error("获取备货详情失败！");
        console.error(err);
      });
    },
    checkPermission(permission) {
      // Use your existing permission check logic
      return this.$store.getters.permissions.includes(permission);
    }
  },
};
</script>

<style>
.app-margins {
  padding: 20px;
}

.sp-commodity {
  font-size: 36px;
  font-weight: bold;
  margin-top: 5px;
}

.input-with-selects .el-input-group__prepend {
  background-color: #fff;
}

.select-input {
  width: 160px;
}

.div-items {
  margin-top: 20px;
}

.flex-row,
.flex-row-reverse {
  -webkit-box-orient: horizontal !important;
}

.flex-row {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: row !important;
  flex-direction: row !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.Card-module_medium__quHDO {
  padding: 16px;
}

.Card-module_card__zeE7r {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 15%);
  box-sizing: border-box;
  width: 100%;
}

.pr-16 {
  padding-right: 16px !important;
}

.flex-1,
.flex-auto {
  -webkit-box-flex: 1 !important;
}

.flex-1 {
  -ms-flex: 1 1 0% !important;
  flex: 1 1 0% !important;
}

.flex-col,
.flex-col-reverse {
  -webkit-box-orient: vertical !important;
}

.flex-col {
  -webkit-box-direction: normal !important;
  -ms-flex-direction: column !important;
  flex-direction: column !important;
}

.flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.gap-4 {
  grid-gap: 4px !important;
  gap: 4px !important;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.text-12 {
  font-size: 12px !important;
}

.text-24 {
  font-size: 24px !important;
}

.Body-module_weight400__4Oy12 {
  font-weight: 400;
}

.Body-module_body1__B5yP7 {
  font-size: 16px;
  line-height: 24px;
}

.Body-module_body__eiCkB {
  color: #2e2f32;
  font-family: BogleWeb, MyriadPro, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin-bottom: 0;
  margin-top: 0;
}

.items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.vertical-line1 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 330px;
  top: 83px;
}

.vertical-line2 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 650px;
  top: 83px;
}

.vertical-line3 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 966px;
  top: 83px;
}

.vertical-line4 {
  border-left: 1px solid #e1dfdf;
  height: 60px;
  position: absolute;
  left: 1290px;
  top: 83px;
}

.disabled-link {
  cursor: not-allowed;
  opacity: 0.7;
  text-decoration: none !important;
}
</style>
